<template>
    <div class="link1" :style="`--padding: ${ padding }`" @click="clickHandle">
        <div class="vicon" v-if="show_icon" :style="`--icon: url(${ icon }); --active-icon: url(${ active_icon }); --w: ${ icon_size }; --h: ${ icon_size }`"></div>
        <div class="text">{{ text }}</div>
    </div>
</template>

<script setup>
defineProps({
    text: { type: String,  default: '' },                 // 默认没有任何文字
    icon: { type: String,  default: '' },                 // 默认没有图标
    active_icon: { type: String,  default: '' },          // 鼠标移入时的图标
    show_icon: { type: Boolean,  default: true },         // 默认显示图标
    padding: { type: String,  default: '0.3vw 0.6vw' },   // 默认内边距
    icon_size: { type: String,  default: '0.8vw' },       // 默认图标大小
});

const emit = defineEmits(['click']);

function clickHandle() {
    emit('click');
}
</script>

<style scoped lang="less">
.link1 {
    display: flex;
    align-items: center;
    color: #333;
    gap: 0.3vw;
    padding: var(--padding);

    .text {
        flex: 1;
        font-size: 0.8vw;
        color: #333;
    }

    &:hover {
        cursor: pointer;

        .vicon {
            &::before {
                opacity: 0;
            }

            &::after {
                opacity: 1;
            }
        }

        .text {
            color: #2563eb;
        }
    }
}

@media (max-aspect-ratio: 16/9) {
    .link1 {
        gap: 0.7vw;

        .vicon {
            transform: scale(1.5);
        }

        .text {
            font-size: 1vw;
        }
    }
}

@media (max-aspect-ratio: 4/3) {
    .link1 {
        gap: 1vw;

        .vicon {
            transform: scale(1.8);
        }

        .text {
            font-size: 1.3vw;
        }
    }
}

@media (max-aspect-ratio: 1/1) {
    .link1 {
        gap: 1.5vw;

        .vicon {
            transform: scale(2);
        }

        .text {
            font-size: 1.7vw;
        }
    }
}

@media (max-aspect-ratio: 3/4) {
    .link1 {
        gap: 2vw;

        .vicon {
            transform: scale(3);
        }

        .text {
            font-size: 2.2vw;
        }
    }
}

@media (max-aspect-ratio: 9/16) {
    .link1 {
        gap: 2.5vw;

        .vicon {
            transform: scale(3.5);
        }

        .text {
            font-size: 3.2vw;
        }
    }
}
</style>